<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>新增用户</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
  </head>
  <body>
    <h1 style="text-align: center">注册用户</h1>

    <form class="row gy-2 gx-3 align-items-center">
      <div class="col-auto">
        <label class="visually-hidden" for="autoSizingInput"></label>
        <input
          name="uName"
          type="text"
          class="form-control"
          id="autoSizingInput"
          placeholder="姓名"
        />
      </div>
      <div class="col-auto">
        <label class="visually-hidden" for="autoSizingInputGroup"></label>
        <div class="input-group">
          <input
            name="uAge"
            type="text"
            class="form-control"
            id="autoSizingInputGroup"
            placeholder="年龄"
          />
        </div>
      </div>
      <br />
      <div class="col-auto">
        <button type="button" class="btn btn-primary" onclick="btnSave()">
          提交
        </button>
      </div>
      <div class="col-auto">
        <button type="button" class="btn btn-primary" onclick="baca()">
          返回
        </button>
      </div>
    </form>

    <script src="../js/axios.min.js"></script>
    <script src="./js/user.js"></script>
    <script src="./js/bootstrap.bundle.min.js"></script>
    <script>
      function btnSave() {
        let arr = document.querySelectorAll("input[name]");
        let [item1, item2] = arr;
        let uName = item1.value;
        let uAge = item2.value;
        let user = {
          uName,
          uAge,
        };
        if (confirm("确认提交返回列表页")) {
          axios.post("/user", user).then(() => {
            location.href = "/users";
          });
        }
      }
      function baca() {
        if (confirm("是否返回列表页")) {
          location.href = "/users";
        }
      }
    </script>
  </body>
</html>
